<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>LQ Calculator</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #project {
            background-color: antiquewhite;
            text-align: center;
        }

        #project .el-row {
            padding: 10px 0;
        }

        @media screen and (max-width: 500px) {}
    </style>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<body>
    <div id="project">
        <el-row>
            <el-col :span="8">Schedule:</el-col>
            <el-col :span="4">S1</el-col>
            <el-col :span="4">S2</el-col>
            <el-col :span="4">S3</el-col>
            <el-col :span="4">Σ</el-col>
        </el-row>
        <el-row>
            <el-col :span="8">Dose/fr.(Gy)</el-col>
            <el-col :span="4">
                <el-input-number @change="onChangeS(0)" v-model="S[0].d" size="mini"
                    :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number @change="onChangeS(1)" v-model="S[1].d" size="mini"
                    :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number @change="onChangeS(2)" v-model="S[2].d" size="mini"
                    :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                {{ sumText }}
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">Nr of fractions:</el-col>
            <el-col :span="4">
                <el-input-number @change="onChangeS(0)" v-model="S[0].n" size="mini"
                    :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number @change="onChangeS(1)" v-model="S[1].n" size="mini"
                    :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number @change="onChangeS(2)" v-model="S[2].n" size="mini"
                    :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="sum_n1" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">Total dose (Gy)</el-col>
            <el-col :span="4">
                <el-input-number v-model="S[0].nd" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="S[1].nd" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="S[2].nd" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="sum_nd1" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8"> &nbsp; </el-col>
            <el-col :span="2">
                α/β =
            </el-col>
            <el-col :span="2">
                <el-input-number @change="onChangeAB1" v-model="ab1" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="2">
                Gy
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">EQD2(Gy)<sub>{{ ab1 }}</sub></el-col>
            <el-col :span="4">
                <el-input-number v-model="S[0].eqd1" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="S[1].eqd1" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="S[2].eqd1" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="sum_eqd1" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">BED(Gy)<sub>{{ ab1 }}</sub></el-col>
            <el-col :span="4">
                <el-input-number v-model="S[0].bed1" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="S[1].bed1" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="S[2].bed1" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="sum_bed1" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-button @click="onCalculate">CALCULATE</el-button>
            </el-col>
            <el-col :span="4">
                <el-button @click="onClear(0)">CL</el-button>
            </el-col>
            <el-col :span="4">
                <el-button @click="onClear(1)">CL</el-button>
            </el-col>
            <el-col :span="4">
                <el-button @click="onClear(2)">CL</el-button>
            </el-col>
            <el-col :span="4">
                <el-button @click="onClearAll">CLEAR ALL</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8"> &nbsp; </el-col>
            <el-col :span="2">
                α/β =
            </el-col>
            <el-col :span="2">
                <el-input-number @change="onChangeAB1" v-model="ab2" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="2">
                Gy
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">EQD2(Gy)<sub>{{ab2}}</sub></el-col>
            <el-col :span="4">
                <el-input-number v-model="S[0].eqd2" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="S[1].eqd2" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="S[2].eqd2" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="sum_eqd2" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">BED(Gy)<sub>{{ab2}}</sub></el-col>
            <el-col :span="4">
                <el-input-number v-model="S[0].bed2" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="S[1].bed2" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="S[2].bed2" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
            <el-col :span="4">
                <el-input-number v-model="sum_bed2" :disabled="true" size="mini" :controls="false"></el-input-number>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">Include in sum:</el-col>
            <el-col :span="4">
                <el-checkbox v-model="inclueItems[0]" label="S1" @change="calculateSum"></el-checkbox>
            </el-col>
            <el-col :span="4">
                <el-checkbox v-model="inclueItems[1]" label="S2" @change="calculateSum"></el-checkbox>
            </el-col>
            <el-col :span="4">
                <el-checkbox v-model="inclueItems[2]" label="S3" @change="calculateSum"></el-checkbox>
            </el-col>
            <el-col :span="4">

            </el-col>
        </el-row>
    </div>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./include/element/index.css">
    <!--引入vue.js-->
    <script src="./include/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        // 新建Vue App
        window.app = new Vue({
            el: '#project',
            data: {
                ab1: 1,
                ab2: 3,
                S: [
                    {
                        d: "",
                        n: "",
                        nd: "",
                        eqd1: "",
                        bed1: "",
                        eqd2: "",
                        bed2: "",
                    },
                    {
                        d: "",
                        n: "",
                        nd: "",
                        eqd1: "",
                        bed1: "",
                        eqd2: "",
                        bed2: "",
                    },
                    {
                        d: "",
                        n: "",
                        nd: "",
                        eqd1: "",
                        bed1: "",
                        eqd2: "",
                        bed2: "",
                    },
                ],
                sum_d1: "",
                sum_n1: "",
                sum_nd1: "",
                sum_eqd1: "",
                sum_bed1: "",
                sum_eqd2: "",
                sum_bed2: "",
                hasCalc: [false, false, false],
                inclueItems: [false, false, false],
                sumText: "",
            },
            mounted() {
            },
            methods: {
                calcBED(n, d, ab) {
                    return (n * d * (1 + d / ab)).toFixed(1);
                },
                calcEQD(n, d, ab) {
                    return (n * d * (d + ab) / (2 + ab)).toFixed(1);
                },
                onCalculate() {
                    for (let i = 0; i < 3; ++i) {
                        if (!this.hasCalc[i]) {
                            let item = this.S[i];
                            item.nd = item.n * item.d;
                            item.eqd1 = this.calcEQD(item.n, item.d, this.ab1);
                            item.bed1 = this.calcBED(item.n, item.d, this.ab1);
                            item.eqd2 = this.calcEQD(item.n, item.d, this.ab2);
                            item.bed2 = this.calcBED(item.n, item.d, this.ab2);
                            this.hasCalc[i] = true;
                            break;
                        }
                    }
                    this.calculateSum();
                },
                calculateSum() {
                    let sumItems = [];
                    this.sum_n1 = 0;
                    this.sum_nd1 = 0;
                    this.sum_eqd1 = 0;
                    this.sum_bed1 = 0;
                    this.sum_eqd2 = 0;
                    this.sum_bed2 = 0;
                    for (let i = 0; i < 3; ++i) {
                        if (this.hasCalc[i]) {
                            sumItems.push(`S${i + 1}`);
                            let item = this.S[i];
                            this.sum_n1 += item.n;
                            this.sum_nd1 += item.nd;
                            this.sum_eqd1 += item.eqd1;
                            this.sum_bed1 += item.bed1;
                            if (this.inclueItems[i]) {
                                this.sum_eqd2 += item.eqd2;
                                this.sum_bed2 += item.bed2;
                            }
                        }
                    }
                    this.sumText = sumItems.join("+");
                },
                onClearAll() {
                    for (let i = 0; i < 3; ++i) {
                        this.S[i] = {
                            d: "",
                            n: "",
                            nd: "",
                            eqd1: "",
                            bed1: "",
                            eqd2: "",
                            bed2: "",
                        };
                    }

                    this.sum_d1 = "";
                    this.sum_n1 = "";
                    this.sum_nd1 = "";
                    this.sum_eqd1 = "";
                    this.sum_bed1 = "";
                    this.sum_eqd2 = "";
                    this.sum_bed2 = "";
                    this.hasCalc = [false, false, false];
                    this.sumText = "";
                },
                onClear(i) {
                    this.S[i] = {
                        d: "",
                        n: "",
                        nd: "",
                        eqd1: "",
                        bed1: "",
                        eqd2: "",
                        bed2: "",
                    };

                    this.hasCalc[i] = false;
                    this.calculateSum();
                },
                onChangeS(i) {
                    let item = this.S[i];
                    item.eqd1 = "";
                    item.bed1 = "";
                    item.eqd2 = "";
                    item.bed2 = "";
                    this.hasCalc[i] = false;
                },
                onChangeAB1() {
                    for (let i = 0; i < 3; ++i) {
                        let item = this.S[i];
                        item.eqd1 = "";
                        item.bed1 = "";
                        this.hasCalc[i] = false;
                    }
                    this.sum_eqd1 = "";
                    this.sum_bed1 = "";
                },
                onChangeAB2() {
                    for (let i = 0; i < 3; ++i) {
                        let item = this.S[i];
                        item.eqd2 = "";
                        item.bed2 = "";
                        this.hasCalc[i] = false;
                    }
                    this.sum_eqd2 = "";
                    this.sum_bed2 = "";
                },
            },

        });
    </script>
</body>